<template name="mine">
	<view>
		<view class='UCenter-bg' :style="'background-image: url(http://cdn.zhoukaiwen.com/zjx_me_bg5.jpeg);margin-top:-' + CustomBar + 'px;'">
			<view class='space' v-show="spaceShow">
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>
		
			<block>
				<view class='text-center'>
					<!-- <view class="cu-avatar2 round margin-right-sm shadow-blur bg-img" style="background-image:url(http://cdn.zhoukaiwen.com/head1.jpg);">
					</view> -->
		
					<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data" style="overflow: hidden;">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="padding text-blue text-xl text-bold">
						你好，<open-data type="userNickName"></open-data>
					</view>
		
				</view>
			</block>
		
			<image src='https://cdn.nlark.com/yuque/0/2019/gif/280373/1570670848649-assets/web-upload/3dbaa72a-062b-470f-9b9d-058ff8f85ab8.gif'
			 mode='scaleToFill' class='gif-wave'></image>
		</view>
		<view class="dong">
			<view class="monster">
				<view class="monster__face">
					<view class="monster__eye avatar-eye avatar-eye--green eye--left">
						<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
					</view>
					<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
						<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
					</view>
					<view class="monster__noses">
						<view class="monster__nose"></view>
						<view class="monster__nose"></view>
					</view>
					<view class="monster__mouth">
						<view class="monster__top"></view>
						<view class="monster__bottom"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">
		
			<view class="cu-item ">
				<button class='content cu-btn'>
					<image src='../../static/line/4.png' class='png' mode='aspectFit'></image>
					<text class='text-lg margin-sm'>账号管理</text>
				</button>
			</view>
			<view class="cu-item ">
				<button class='content cu-btn'>
					<image src='../../static/line/map.png' class='png'></image>
					<text class='text-lg margin-sm'>新消息通知</text>
				</button>
			</view>
		
			<view class="cu-item ">
				<button class='content cu-btn'>
					<image src='../../static/line/time.png' class='png'></image>
					<text class='text-lg margin-sm'>帮助与反馈</text>
				</button>
			</view>
		
			<view class="cu-item ">
				<button class='content cu-btn'>
					<image src='../../static/line/line.png' class='png'></image>
					<text class='text-lg margin-sm'>关于应用</text>
				</button>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				login: false,
				avatarUrl: '/static/logo.png',
				uerInfo: {}
			}
		},
		computed:{
			...mapState(['isShowAds','position','bak','userInfo']),
			...mapGetters(['isLogin']),
		},
		methods: {
			goLogin() {
				if (!this.isLogin) {
					console.log('点击前往登录');
					uni.navigateTo({
						url:'/pages/mine/login'
					})
				}
			}
		}
	}
</script>

<style>
@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('data:font/truetype;cahrtset=utf-8;base64,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') format('truetype');
	}

	/* page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	} */
	.sw-view{
		display: flex;
	}
	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #3c92f5;
		flex-direction: row;
		align-items: center;
		margin: 0;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
		font-size: 11px;
		line-height: 150upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);
	
	}
	
	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}
	
	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}
	
	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}
	
	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}
	
	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}
	
	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}
	
	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}
	
	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}
	
	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}
	
	
	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	
	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}
	
	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}
	
	
	.eye--left {
		left: 10%;
	}
	
	.eye--right {
		left: 85%;
	}
	
	.eye--center {
		left: 45%;
		top: 10%;
	}
	
	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}
	
	
	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}
	
	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}
	
	
	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}
	
	/**/
	@keyframes t {
	
		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}
	
		20% {
			top: 0px;
		}
	
		30% {
			top: -20px;
		}
	
		40% {
			top: -0px;
		}
	
		50% {
			top: -25px;
		}
	
		70% {
			top: 0px;
		}
	}
	
	@keyframes b {
	
		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}
	
		20% {
			bottom: 0px;
		}
	
		30% {
			bottom: -20px;
		}
	
		40% {
			bottom: -0px;
		}
	
		50% {
			bottom: -25px;
		}
	
		70% {
			bottom: 0px;
		}
	}
	
	@keyframes mouth {
	
		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}
	
		15% {
			width: 90%;
			height: 30%;
		}
	
		20% {
			width: 50%;
			height: 70%;
		}
	
		25% {
			width: 70%;
			height: 70%;
		}
	
		30% {
			width: 80%;
			height: 60%;
		}
	
		35% {
			width: 60%;
			height: 70%;
		}
	
		40% {
			width: 55%;
			height: 75%;
		}
	
		45% {
			width: 50%;
			height: 90%;
		}
	
		50% {
			width: 40%;
			height: 70%;
		}
	
		55% {
			width: 70%;
			height: 95%;
		}
	
		60% {
			width: 40%;
			height: 50%;
		}
	
		65% {
			width: 100%;
			height: 60%;
		}
	
		70% {
			width: 100%;
			height: 70%;
		}
	
		75% {
			width: 90%;
			height: 70%;
		}
	
		80% {
			width: 50%;
			height: 70%;
		}
	
		85% {
			width: 90%;
			height: 50%;
		}
	
		85% {
			width: 40%;
			height: 70%;
		}
	
		90% {
			width: 90%;
			height: 30%;
		}
	
		95% {
			width: 100%;
			height: 10%;
		}
	}
	
	@keyframes tongue {
	
		0%,
		20%,
		100% {
			bottom: -80px;
		}
	
		30%,
		90% {
			bottom: -40px;
		}
	
		40% {
			bottom: -45px;
		}
	
		50% {
			bottom: -50px;
		}
	
		70% {
			bottom: -80px;
		}
	
		90% {
			bottom: -40px;
		}
	}
	
	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.UCenter-bg text {
		opacity: 0.8;
	}
	
	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
	
	
	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}
/* 	
	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	} */
	
	.dialog2 {
		background: none;
	}
	
	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}
	
	
	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	
	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}
	
	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}
	
	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}
	
	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}
	
	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}
	
	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	
	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}
	
	
	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}
	
	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}
	
	
	.bg-product {
		background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
		color: #fff;
	}
	
	.margin-bottom-my {
		margin-bottom: 150rpx;
	}
	
</style>
